<!-- -->
<template>
  <div id='tradelist'>
    <div class="tradetop">EBUC交易中心</div>
    <!-- 挂卖交易中心 -->
    <div class="tradesell" v-if="tradesell">
        <div class="warning">&nbsp;注意：每一笔交易，卖方用户都需要支付10%的手续费，手续费在订单确定后直接从现金积分中扣除。</div>
        <div class="message">
            <ul>
                <li>用户名：   <span>&emsp;&emsp;&emsp;{{name}}</span></li>
                <li>挂卖单价： &emsp;&emsp;<input type="text" v-model="price"></li>
                <li>挂卖数量： &emsp;&emsp;<input type="text" v-model="number">&emsp;<span></span></li>
                <li>可卖出总价：<span>&emsp;&nbsp;&yen;{{sumprice}}</span>&emsp;</li>
                <li>手续费：&emsp;&emsp;&emsp;&nbsp;<span>&yen;{{charge}}</span></li>
                <li>安全密码：&emsp;&emsp;&nbsp;<input type="password" v-model="password" placeholder="请输入你的安全密码">&emsp;<span>输入安全密码以验证身份，确保账号交易安全</span></li>
            </ul>
        </div>
        <div class="btn">
            <button @click="myebucSell">确定挂卖</button>
            <button @click="fanhui">取消</button>
        </div>
    </div>
    <!-- 买入交易中心 -->
    <div class="tradesell" v-if="tradebuy">
        <div class="message">
            <ul>
                <li>用户名：   <span>&emsp;&emsp;&emsp;{{name}}</span></li>
                <li>挂买单价： &emsp;&emsp;<input type="text" v-model="price"></li>
                <li>挂买数量： &emsp;&emsp;<input type="text" v-model="number">&emsp;</li>
                <li>挂买需支付：<span>&emsp;&nbsp;&yen;{{sumprice}}</span>&emsp;</li>
                <li>安全密码：&emsp;&emsp;&nbsp;<input type="password" v-model="password" placeholder="请输入你的安全密码">&emsp;输入安全密码以验证身份，确保账号交易安全</li>
            </ul>
        </div>
        <div class="btn">
            <button @click="myebucBuy">确定挂买</button>
            <button @click="fanhui">取消</button>
        </div>
    </div>
    <!-- 挂买-卖出交易中心 -->
     <div class="tradesell" v-if="buymes">
        <div class="warning">注意：每一笔交易，卖方用户都需要支付10%的手续费，手续费在订单确定后直接从现金积分中扣除。</div>
        <div class="message buymes">
            <ul>
                 <!-- readonly="readonly" -->
                <li>挂买用户： <span>&emsp;&emsp;{{ebuc_sell.user_name}}</span></li>
                <li>挂买单价： &emsp;&emsp;<span>&yen;{{ebuc_sell.money}}</span></li>
                <li>挂买数量： &emsp;&emsp;<span>{{ebuc_sell.other}}</span></li>
                <li>挂买时间：&emsp;&emsp;&nbsp;<span>{{ebuc_sell.add_time}}</span></li>
                <li>卖出数量： &emsp;&emsp;<input type="text" v-model="somenum"></li>
                <li>可卖出总价：<span>&emsp;&nbsp;&yen;{{someprice}}</span>&emsp;</li>
                <li>手续费：&emsp;&emsp;&emsp;&nbsp;<span>&yen;{{somecharge}}</span></li>
            </ul>
        </div>
        <div class="btn">
            <button @click="tradealertsell">确定卖出</button>
            <button @click="fanhui">取消</button>
        </div>
    </div>
    <!-- 挂卖-买入交易中心 -->
    <div class="tradesell" v-if="sellmes">
        <div class="message buymes">
            <ul>
                <li>挂卖用户： <span>&emsp;&emsp;{{ebuc_sell.user_name}}</span></li>
                <li>挂卖单价： &emsp;&emsp;<span>&yen;{{ebuc_sell.money}}</span></li>
                <li>挂卖时间：&emsp;&emsp;&nbsp;<span>{{ebuc_sell.add_time}}</span></li>  
                <li>挂卖数量：&emsp;&emsp;&nbsp;<span>{{ebuc_sell.other}}</span></li>  
                <li>购买数量： &emsp;&emsp;<input type="text" v-model="somenum"></li>
                <li>购买需支付：<span>&emsp;&nbsp;&yen;{{someprice}}</span>&emsp;</li>
            </ul>
        </div>
        <div class="btn">
            <button @click="tradealertbuy">确定购买</button>
            <button @click="fanhui">取消</button>
        </div>
    </div>
    <!-- 弹出窗口 -->
    <el-dialog :title="(titlelist == '1')?'确认卖出':'确认购买'" :visible.sync="dialogFormVisible" :close-on-click-modal=false style="width:70%;min-width:50%;margin-left:15vw;">
        <div class="alertmes">
            <ul>
                <li>{{progect[titlelist].itemone}}：&emsp;<span>&yen;{{alert_sell.money}}</span></li>
                <li>{{progect[titlelist].itemtwo}}：&emsp;<span>{{somenum}}</span></li>              
                <li>{{progect[titlelist].itemthree}}：<span>&emsp;&yen;{{someprice}}</span>&emsp;</li>
                <!-- <li>{{progect[titlelist].itemfour}}：&emsp;<span>{{alert_sell.zongjia}}</span></li>   -->
                <li>安全密码：&emsp;<input type="password" v-model="password" placeholder="请输入你的安全密码">&emsp;</li>
            </ul>
            <div class="btn">
                <button @click="tradesellalert">{{progect[titlelist].itemfive}}</button>
                <button @click="tradesellclose">取消</button>
            </div>
            <div class="notice">*下单后买房需在30分钟之内完成支付，过时将自动取消交易。</div>
        </div>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  name: "tradelist",
  data() {
    return {
      status: this.$route.query.status,
      status1: this.$route.query.status1,
      id: this.$route.query.id, //挂卖，挂买id
      tradesell: false,
      tradebuy: false,
      buymes: false,
      sellmes: false,
      name: "",
      price: "", //单价
      number: "", //数量
      // sumprice: '',//总价
      // charge: '',//手续费
      shouxu: "",
      mode: "现金积分钱包", //支付方式
      password: "",
      // someprice: '',
      somenum: "",
      somemoney: "",
      // 卖出
      ebuc_sell: {},
      // 买入
      ebuc_buy: {},
      // 弹窗
      alert_sell: {},
      dialogFormVisible: false,
      titlelist: "1",
      progect: [
        {
          itemone: "挂卖单价",
          itemtwo: "挂卖数量",
          itemthree: "购买金额",
          itemfour: "支付方式",
          itemfive: "确定支付"
        },
        {
          itemone: "挂买单价",
          itemtwo: "挂买数量",
          itemthree: "收款金额",
          itemfour: "收款方式",
          itemfive: "确定收款"
        }
      ]
    };
  },
  // 计算挂卖总价和手续费
  computed: {
    sumprice: function() {
      return (this.price * this.number).toFixed(2);
    },
    charge: {
      get() {
        return (this.sumprice * this.shouxu / 100).toFixed(2);
      }
    },
    someprice: function() {
      return (this.somenum * this.ebuc_sell.money).toFixed(2);
    },
    somecharge: {
      get() {
        return (this.someprice * this.shouxu / 100).toFixed(2);
      }
    }
  },
  created() {
    if (this.status === "0") {
      //我要挂买
      this.tradebuy = true;
      this.mygetbuy();
    } else if (this.status === "1") {
      // 我要挂卖
      this.tradesell = true;
      this.mygetsell();
    }
  },
  methods: {
    // 我要挂卖
    mygetsell() {
      this.axios
        .post("Index/my_ebuc_sell")
        .then(({ data }) => {
          console.log(data);
          this.name = data.name;
          this.shouxu = data.shouxu;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    myebucSell() {
      this.axios
        .post("Index/my_ebuc_sell_cl", {
          money: this.price,
          num: this.number,
          password: this.password
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === "1") {
            this.$message({ message: "数量不足", type: "error" });
          } else if (data.status === "2") {
            this.$message({ message: "安全密码不正确", type: "error" });
          } else if (data.status === "3") {
            this.$router.go(-1);
            this.$message({ message: "操作成功", type: "success" });
          } else if (data.status === "4") {
            this.$message({ message: "超出卖出次数", type: "error" });
          } else if (data.status === "5") {
            this.$message({ message: "超出当前卖出数量", type: "error" });
          } else if (data.status === "6") {
            this.$message({ message: "请先激活账户", type: "error" });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 我要挂买
    mygetbuy() {
      this.axios
        .post("Index/my_ebuc_pay")
        .then(({ data }) => {
          console.log(data);
          this.name = data.name;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    myebucBuy() {
      this.axios
        .post("Index/my_ebuc_pay_cl", {
          money: this.price,
          num: this.number,
          password: this.password
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === "1") {
            this.$message({ message: "密码不正确", type: "error" });
          } else if (data.status === "2") {
            this.$message({ message: "回购钱包数量不足", type: "error" });
          } else if (data.status === "3") {
            this.$router.go(-1);
            this.$message({ message: "操作成功", type: "success" });
          } else if (data.status === "4") {
            this.$message({ message: "账户未激活", type: "error" });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    fanhui() {
      this.$router.go(-1);
      // this.$router.push({name:'ebgrade',query: {activetype: '1'}})
    },
    // 确认卖出
    tradealertsell() {
      if (!this.somenum) {
        this.$message({ message: "数量不能为空", type: "error" });
      } else {
        this.dialogFormVisible = true;
        this.titlelist = "1";
        this.axios
          .post("Index/ebuc_trad_sell_lay", {
            id: this.ebuc_sell.id
          })
          .then(({ data }) => {
            console.log(data);
            this.alert_sell = data.info;
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    // 确认购买
    tradealertbuy() {
      if (!this.somenum) {
        this.$message({ message: "数量不能为空", type: "error" });
      } else {
        this.dialogFormVisible = true;
        this.titlelist = "0";
        this.axios
          .post("Index/ebuc_trad_pay_lay", {
            id: this.ebuc_sell.id
          })
          .then(({ data }) => {
            console.log(data);
            this.alert_sell = data.info;
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    // 挂买弹窗
    tradesellalert() {
      //确认支付
      if (this.titlelist === "0") {
        this.axios
          .post("Index/ebuc_trad_pay_lay_cl", {
            id: this.alert_sell.id,
            num: this.somenum,
            password: this.password
          })
          .then(({ data }) => {
            console.log(data);
            // this.titlelist = '0';
            if (data.status === "1") {
              this.$message({ message: "安全密码不正确", type: "error" });
            } else if (data.status === "2") {
              this.$message({ message: "积分不足", type: "error" });
            } else if (data.status === "3") {
              this.$bus.$emit("loadebuc");
              this.$router.go(-1);
              this.dialogFormVisible = false;
              this.$message({ message: "操作成功", type: "success" });
            } else if (data.status === "4") {
              this.$message({ message: "操作失败", type: "error" });
            } else if (data.status === "5") {
              this.$message({ message: "输入数量超出现有数量", type: "error" });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
        //确定收款
      } else if (this.titlelist === "1") {
        this.axios
          .post("Index/ebuc_trad_sell_cl", {
            id: this.alert_sell.id,
            num: this.somenum,
            password: this.password
          })
          .then(({ data }) => {
            console.log(data);
            // this.titlelist = '1';
            if (data.status === "1") {
              this.$message({ message: "EBUC数量不足", type: "error" });
            } else if (data.status === "2") {
              this.$message({ message: "安全密码不正确", type: "error" });
            } else if (data.status === "3") {
              this.$message({ message: "积分不足", type: "error" });
            } else if (data.status === "4") {
              this.$bus.$emit("loadebuc");
              this.$router.go(-1);
              this.dialogFormVisible = false;
              this.$message({ message: "操作成功", type: "success" });
            } else if (data.status === "5") {
              this.$message({ message: "操作失败", type: "error" });
            } else if (data.status === "6") {
              this.$message({ message: "输入数量超出现有数量", type: "error" });
            }
            this.dialogFormVisible = false;
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    tradesellclose() {
      this.dialogFormVisible = false;
    }
  }
};
</script>
<style lang='scss' scoped>
#tradelist {
  .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size: 13px;
    font-family: MicrosoftYaHei-Bold;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
  }
  .tradesell {
    .warning {
      width: 550px;
      margin-top: 15px;
      margin-left: 25px;
      margin-bottom: 30px;
      padding-left: 5px;
      font-size: 11px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
      background: rgba(255, 247, 230, 1);
      border-radius: 2px;
      line-height: 31px;
      border: 1px solid rgba(224, 3, 0, 1);
    }
    .message {
      margin-left: 40px;
      margin-top: 10px;
      li {
        line-height: 50px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
      }
      input {
        width: 209px;
        height: 33px;
        padding-left: 5px;
        border-radius: 2px;
        border: 1px solid rgba(151, 151, 151, 1);
      }
      li:nth-of-type(1) {
        span {
          font-weight: 700;
        }
      }
      li:nth-of-type(4) {
        span {
          color: rgba(224, 3, 0, 1);
        }
      }
      li:nth-of-type(4),
      li:nth-of-type(5) {
        span {
          font-weight: 700;
        }
      }
    }
    .buymes li {
      line-height: 40px;
      span {
        color: rgba(0, 0, 0, 1) !important;
        font-weight: 700;
      }
    }
    .buymes li:nth-of-type(6) {
      span {
        color: rgba(224, 3, 0, 1) !important;
      }
    }
    .btn {
      margin-top: 50px;
      margin-left: 40px;
      button {
        cursor: pointer;
        width: 82px;
        height: 33px;
        background: rgba(224, 3, 0, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        margin-right: 25px;
      }
      button:nth-of-type(2) {
        background: rgba(225, 225, 225, 1);
        color: rgba(0, 0, 0, 1);
      }
    }
  }
  .alertmes {
    margin-left: 40px;
    margin-top: -30px;
    min-width: 550px;
    li {
      line-height: 40px;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      span {
        font-weight: 700;
      }
    }
    input {
      width: 209px;
      height: 33px;
      padding-left: 5px;
      border-radius: 2px;
      border: 1px solid rgba(151, 151, 151, 1);
    }
    li:nth-of-type(3) {
      span {
        color: rgba(224, 3, 0, 1);
      }
    }
    .btn {
      margin-top: 30px;
      button {
        cursor: pointer;
        width: 82px;
        height: 33px;
        background: rgba(224, 3, 0, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
      }
      button:nth-of-type(2) {
        margin-left: 25px;
        background: rgba(225, 225, 225, 1);
        color: rgba(0, 0, 0, 1);
      }
    }
    .notice {
      font-size: 12px;
      line-height: 40px;
    }
  }
}
</style>